<template>
  <view class="page">
    <view class="top" @click="$goBack(2,'/bundle/pages/addcar/addcar')">
      <view style="width: 500rpx;">
        <view v-if="toplist==null" class="top-name">添加车辆</view>
        <text v-if="toplist==null" style="color: #464646;">完善车辆后享受更多服务</text>
        <view v-if="toplist!=null" class="top-name">{{toplist.carSeriesName}}</view>
      </view>
      <image style="width: 200rpx; height:120rpx;" v-if="toplist!=null" :src="toplist.carSeriesImg"></image>
      <u-button v-else type="primary" shape="circle" text="添加车辆" color="#FBCC32"></u-button>
    </view>
    <view class="list">
      <u--form labelPosition="left" labelWidth="90" :model="form" :rules="rules" ref="uForm">
        <u-form-item label="司机姓名:" prop="userInfo.driverName" borderBottom ref="item1">
          <u--input fontSize="12" v-model="form.userInfo.driverName" border="none"
                    placeholder="请输入"></u--input>
        </u-form-item>
        <u-form-item label="联系电话:" prop="userInfo.driverPhone" borderBottom ref="item1">
          <u--input maxlength="11" fontSize="12" v-model="form.userInfo.driverPhone" border="none"
                    placeholder="请输入"></u--input>
        </u-form-item>
        <u-form-item fontSize="12" label="车牌号:" prop="userInfo.carNumber" borderBottom ref="item1">
          <u--input @blur="car" fontSize="12" v-model="form.userInfo.carNumber" border="none"
                    placeholder="请输入"></u--input>
        </u-form-item>
        <u-form-item label="行驶证编号:" prop="userInfo.drivingLicense" borderBottom ref="item1">
          <u--input fontSize="12" v-model="form.userInfo.drivingLicense" border="none"
                    placeholder="请输入"></u--input>
        </u-form-item>
        <u-form-item label="车辆类型:" prop="userInfo.carTypename" ref="item1" borderBottom>
          <u-input fontSize="12" v-model="form.userInfo.carTypename" border="none" disabled>
            <template slot="suffix">
              <view style="color:#0F62F0;font-size: 26rpx; margin-right: 20rpx;"
                    @click="carTypeshow=true">
                选择类型</view>
            </template>
          </u-input>
        </u-form-item>

        <u-form-item label="上牌时间:" prop="userInfo.cardsTime" borderBottom ref="item1">
          <u-input fontSize="12" v-model="form.userInfo.cardsTime" border="none" disabled>
            <template slot="suffix">
              <view style="color:#0F62F0;font-size: 26rpx;  margin-right: 20rpx;" @click="show=true">选择日期
              </view>
            </template>
          </u-input>
        </u-form-item>

        <u-form-item label="交强险结束时间:" prop="userInfo.strongOverTime" borderBottom ref="item1"
        >
          <u-input fontSize="12" v-model="form.userInfo.strongOverTime" border="none" disabled>
            <template slot="suffix">
              <view style="color:#0F62F0;font-size: 26rpx;  margin-right: 20rpx;" @click="strongOver=true">选择日期
              </view>
            </template>
          </u-input>
        </u-form-item>

        <u-form-item label="商业险结束时间:" prop="userInfo.commerceOverTime" borderBottom ref="item1"
        >
          <u-input fontSize="12" v-model="form.userInfo.commerceOverTime" border="none" disabled>
            <template slot="suffix">
              <view style="color:#0F62F0;font-size: 26rpx;  margin-right: 20rpx;" @click="commerce=true">选择日期
              </view>
            </template>
          </u-input>
        </u-form-item>

        <u-form-item label="车架号:" prop="userInfo.frameNo" borderBottom ref="item1">
          <u--input fontSize="12" v-model="form.userInfo.frameNo" border="none" placeholder="请输入">
          </u--input>
        </u-form-item>
        <u-form-item label="里程数:" prop="userInfo.mileage" borderBottom ref="item1">
          <u--input fontSize="12" v-model="form.userInfo.mileage" border="none" placeholder="请输入">

          </u--input>
        </u-form-item>
        <u-form-item label="归属企业:" prop="userInfo.companyName" ref="item1">
          <u-input fontSize="12" v-model="form.userInfo.companyName" border="none" disabled @click="companyList">
            <template slot="suffix">
              <view style="color:#0F62F0;font-size: 26rpx; margin-right: 20rpx;" @click="pickershow=true">
                选择企业</view>
            </template>

          </u-input>
        </u-form-item>
      </u--form>
    </view>
    <view class="but" @click="but">提交</view>
    <u-toast ref="uToast"></u-toast>
    <u-picker @confirm="cartype" @cancel="carTypeshow=false" :show="carTypeshow" :columns="[carTypelist]"
              keyName="name"></u-picker>
    <u-picker @confirm="picker" @cancel="pickershow=false" :show="pickershow" :columns="columns"
              keyName="firmName"></u-picker>
    <!-- 	<u-calendar @confirm="calendar($event)" @close="show=false" :show="show" mode="single" min-date="2016-1-1"
        month-num="100"></u-calendar> -->

    <u-datetime-picker :minDate="1420041600000"	 @cancel="show=false" @confirm="calendar" :show="show"  mode="date"></u-datetime-picker>
    <u-datetime-picker :minDate="timestamp"	 @cancel="strongOver=false" @confirm="strongOverTime" :show="strongOver"  mode="date"></u-datetime-picker>
    <u-datetime-picker :minDate="timestamp"	 @cancel="commerce=false" @confirm="commerceTime" :show="commerce"  mode="date"></u-datetime-picker>
  </view>

</template>

<script>
import {
  apitCompanyList
} from '@/api/app.js'
import {
  apidriverSaveCar,
  apifindCarByCarNumber,

} from "@/api/car.js"
import code from '../../../uni_modules/uview-ui/libs/config/props/code'
export default {
  data() {
    return {
      strongOver:false,
      commerce:false,
      toplist: "",
      show: false,
      pickershow: false,
      carTypeshow: '',
      timestamp:'',
      maxDate: '',
      columns: [

      ],
      carTypelist: [{
        name: '微面',
        id: 1
      },
        {
          name: '小面',
          id: 2
        },
        {
          name: '中面',
          id: 3
        },
        {
          name: '大面',
          id: 4
        },
        {
          name: '轻卡',
          id: 5
        },
        {
          name: '中卡',
          id: 6
        },
        {
          name: '重卡',
          id: 7
        }
      ],
      form: {
        userInfo: {
          driverName: "",
          driverPhone: "",
          enterpriseId: '', //企业id
          carNumber: "", //车牌号
          companyName: "", //企业名
          mileage: '', //里程
          drivingLicense: "", //行政编码,
          carType: '',
          carTypename: "",
          strongOverTime: null,
          commerceOverTime: null,
          frameNo: null
        }
      },
      rules: {
        'userInfo.driverName': {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change']
        },
        'userInfo.driverPhone': {
          type: 'string',
          required: true,
          message: '请填写电话',
          trigger: ['blur', 'change']
        },
        'userInfo.carNumber': {
          type: 'string',
          required: true,
          message: '请填写车牌号',
          trigger: ['blur', 'change']
        },
        'userInfo.drivingLicense': {
          type: 'string',
          required: true,
          message: '请填写行政编码',
          trigger: ['blur', 'change']
        },
        'userInfo.carTypename': {
          type: 'string',
          required: true,
          message: '请选择车辆类型',
          trigger: ['blur', 'change']
        },
        'userInfo.cardsTime': {
          type: 'string',
          required: true,
          message: '请选择上牌时间',
          trigger: ['blur', 'change']
        },
        'userInfo.commerceOverTime': {
          type: 'string',
          required: true,
          message: '请选择商业险到期时间',
          trigger: ['blur', 'change']
        },
        'userInfo.strongOverTime': {
          type: 'string',
          required: true,
          message: '请选择交强险到期时间',
          trigger: ['blur', 'change']
        },
        'userInfo.frameNo': {
          type: 'string',
          required: true,
          message: '请填写车架号',
          trigger: ['blur', 'change']
        },

        'userInfo.mileage': {
          type: 'string',
          required: true,
          message: '请填写公里数',
          trigger: ['blur', 'change']
        },
        'userInfo.companyName': {
          type: 'string',
          required: true,
          message: '请选择企业',
          trigger: ['blur', 'change']
        },
      },
    }
  },
  beforeDestroy() {
    this.$store.commit("setcaruserInfo", {})
  },
  onLoad() {
    this.timestamp  = Date.parse(new Date()); // 1604297892000

    this.companyList()
  },
  onShow() {
    // brandId:this.$store.state.brand,
    // modelsId:this.$store.state.cartype.id,
    // seriesId:this.$store.state.carseries
    // console.log(this.$store.state.brand,this.$store.state.cartype.id,this.$store.state.carseries)
    this.toplist = this.$store.state.cartype
    // console.log(this.$store.state.cartype)

  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm.setRules(this.rules)
  },
  methods: {
    time(timestamp){
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = ('0' + (date.getMonth() + 1)).slice(-2);
      const day = ('0' + date.getDate()).slice(-2);
      const formattedDate = year + '-' + month + '-' + day;
      return formattedDate
    },
    calendar(e) {
      //todo  需要选择交强险时间和商业险到期时间
      this.form.userInfo.cardsTime=this.time(e.value)
      this.show=false
    },
    commerceTime(e){
      this.form.userInfo.commerceOverTime=this.time(e.value)
      this.commerce=false
    },
    strongOverTime(e){
      this.form.userInfo.strongOverTime=this.time(e.value)
      this.strongOver=false
    },
    userInfocarType(i) {
      if (i == 1) {
        return "微面"
      } else if (i == 2) {
        return "小面"
      } else if (i == 3) {
        return "中面"
      } else if (i == 4) {
        return "大面"
      } else if (i == 5) {
        return "轻卡"
      } else if (i == 6) {
        return "中卡"
      } else if (i == 7) {
        return "重卡"
      }
    },
    cartype(e) {
      this.form.userInfo.carType = e.value[0].id
      this.form.userInfo.carTypename = e.value[0].name
      this.carTypeshow = false
    },
    but() {
      this.$refs.uForm.validate().then(res => {
        if (this.toplist == null) {
          uni.$u.toast('请添加车辆')
          return false;
        }
        let params = {
          ...this.form.userInfo,
          brandId: this.$store.state.brand,
          modelsId: this.$store.state.cartype.id,
          seriesId: this.$store.state.carseries
        }
        apidriverSaveCar(params).then((res) => {
          if (res.code == 200) {
            this.$refs.uToast.show({
              type: 'default',
              message: "添加成功"
            })

            this.$store.commit("setbrand", "")
            this.$store.commit("setcarseries", "")
            this.$store.commit("setcartype", null)
            setTimeout(() => {
              uni.redirectTo({
                url:"/pages/home/home"
              })
            }, 1000)
          }else{
            this.$refs.uToast.show({
              type: 'default',
              message: res.msg
            })
          }

        })

      }).catch(errors => {
        uni.$u.toast('校验失败')
      })
    },
    car() {
      if (this.form.userInfo.carNumber == "" || this.form.userInfo.carNumber == null) {
        return false
      }
      apifindCarByCarNumber(this.form.userInfo.carNumber).then((res) => {

        if (res.data.brandId != "") {
          this.toplist = {
            carSeriesName: res.data.brandName,
            carSeriesImg: res.data.brandImage
          }

          let driverName = this.form.userInfo.driverName;
          let driverPhone = this.form.userInfo.driverPhone;

          this.$store.commit("setbrand", res.data.brandId)
          this.$store.commit("setcarseries", res.data.modelsId)
          this.form.userInfo = {
            ...res.data,
            driverName: driverName,
            driverPhone: driverPhone,
          }
          this.form.userInfo.carTypename = this.userInfocarType(this.form.userInfo.carType)

        }
      })

    },

    picker(e) {
      this.form.userInfo.enterpriseId = e.value[0].id
      this.form.userInfo.companyName = e.value[0].firmName
      this.pickershow = false
    },
    companyList() {
      apitCompanyList().then((res) => {
        console.log(res)
        this.columns.push(res.data)
      })
    },
    sexSelect(e) {
      this.model1.userInfo.sex = e.name
      this.$refs.uForm.validateField('userInfo.sex')
    },
    // showTimeFn() { //u-calendar限制无法点击当日之后的日期, 现设置点击可以设置当日之后的日期
    // 	this.show = true
    // 	let dete = new Date()
    // 	let year = dete.getFullYear()
    // 	let month = dete.getMonth() + 1
    // 	let day = dete.getDate()
    // 	let maxYear = year + 1
    // 	this.maxDate = maxYear + '-' + month + '-' + day
    // },

  }
}
</script>

<style lang="scss" scoped>
.top {
  width: 718rpx;
  height: 180rpx;
  background-color: #fff;
  margin: 16rpx;
  padding: 14rpx;
  box-sizing: border-box;
  @include flex(row, space-between, center) font-size: 28rpx;

  .top-name {
    font-size: 32rpx;
    font-weight: 600;
    margin-bottom: 10rpx;
  }
}

::v-deep .u-button {
  width: 184rpx !important;
  height: 64rpx !important;
  color: #000 !important;
}

.list {
  width: 718rpx;
  background-color: #fff;
  margin: 16rpx;
  padding: 14rpx;
  box-sizing: border-box;
}

.but {
  margin: 50rpx 40rpx;
  padding: 20rpx 200rpx;
  background-color: $theme-color;
  font-size: 32rpx;
  text-align: center;
  border-radius: 10rpx;
}

::v-deep .u-form-item__body__left__content__label {
  font-size: 30rpx;
  padding-left: 10rpx;
}
</style>
